<template>
  <el-dialog
    title="导入库位"
    :visible="importVisible"
    @close="close"
    width="30%"
  >
    <div class="upload-demo" v-loading="loading">
      <el-upload
        v-if="show"
        drag
        :limit="1"
        action="#"
        :http-request="importArea"
        multiple
        :before-upload="beforeUpload"
        accept=".xlsx"
        :on-change="onChange"
        :auto-upload="false"
      >
        <i class="el-icon-upload" :class="{ active: isShow }"></i>
        <div class="el-upload__text">
          点击或将表格文件拖拽到这里上传
          <p class="title">仅支持单个表单文件导入</p>
        </div>
      </el-upload>
      <div v-else class="successbody">
        <div class="header">导入成功<span class="left">{{ success }}</span>条，失败<span class="right">{{ fail }}</span>条</div>
        <ul>
          <li v-for="(item,index) in message" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
    <div slot="footer" class="labelbutton">
      <button v-if="show" class="penpel resetbutton" @click="close">
        取消
      </button>
      <button
        class="penpel"
        :class="{ searchbutton: !isShow || !show }"
        @click="importArea"
        :disabled="isShow"
      >
        确认
      </button>
    </div>
  </el-dialog>
</template>

<script>
import { importArea } from '@/api/area'
export default {
  name: 'importExcel',
  data () {
    return {
      fileList: '',
      show: true,
      message: [],
      fail: '',
      success: '',
      loading: false
    }
  },
  props: {
    importVisible: {
      type: Boolean,
      required: true
    }
  },
  computed: {
    isShow () {
      if (!this.fileList) return true
      return false
    }
  },
  methods: {
    close () {
      this.$emit('update:importVisible', false)
    },
    // 文件上传之前进行判断
    beforeUpload (file) {
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const size = file.size / 1024 / 1024
      if (extension !== 'xlsx') {
        this.$message.warning('只能上传后缀是.xlsx的文件')
      }
      if (size > 10) {
        this.$message.warning('文件大小不得超过10M')
      }
    },
    // 上传
    async importArea () {
      if (this.show) {
        this.loading = true
        const formdata = new FormData()
        formdata.append('file', this.fileList)
        const res = await importArea(formdata)
        this.show = false
        this.message = res.message
        this.fail = res.fail
        this.success = res.success
        this.loading = false
      } else {
        this.close()
        this.$emit('updataArea')
      }
    },
    // 文件发生改变触发
    onChange (file, fileList) {
      this.fileList = file.raw
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .labelbutton {
    text-align: right;
    .penpel {
      @include penpel;
    }
    .searchbutton {
      @include searchbutton;
    }
    .resetbutton {
      @include resetbutton;
      margin-right: 20px;
    }
  }
  .active {
    color: #00be76;
  }
  .upload-demo {
    padding: 12px 20px 20px;
    min-height: 198px;
    background: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    text-align: center;
    color: #332929;
    .el-upload-dragger .el-upload__text {
      color: #b5abab;
    }
    .title {
      margin-top: 10px;
    }
    .successbody{
    .header {
      font-size: 16px;
      .left {
        color: #00be76;
      }
      .right {
        color: red;
      }
    }
    ul {
      text-align: left;
      color: #999;
      font-size: 14px;
      margin-top: 10px;
    }
    }
  }
</style>
